<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" name="viewport" content="width=640,user-scalable=no">
		<title>确认订单</title>
		<script src="js/vue.js"></script>
		<link rel="stylesheet" type="text/css" href="css/确认订单.css"/>
	</head>
	<body>
	<div id="app" class="zzj_warp">
		<div id="Big_div"><!-- 内容用一个大盒子装起来 -->	
			<!-- 内容盒子 -->
			<div class="zzj_neirong">
				<div class="zzj_neirong_box1" ><input id="shr" type="text" placeholder="收货人" /></div>
				<div class="zzj_neirong_box2"><input id="sjhm" type="text" placeholder="手机号码" /></div>
				<div class="zzj_neirong_box3"><input id="dqxx" type="text" placeholder="地区信息" /></div>
				<div class="zzj_neirong_box4"><input id="xxdz" type="text" placeholder="详细地址" /></div>
				<div class="zzj_neirong_box5"><input id="yzbm" type="text" placeholder="邮政编码" /></div>				
				<div class="zzj_neirong_box6">
					<p id="songhuo">送货时间：</p>
					<p class="box6_inp">
						<input id="name" type="radio" name="sex" value="工作日、双休日与节假日均可送货" /><label for="name">{{shsj1}}</label>
						<br><input id="name1" type="radio" name="sex" value="只有双休日、节假日送货（工作日不用送货）" /><label for="name1">{{shsj2}}</label>
						<br><input id="name2" type="radio" name="sex" value="只有工作日送货（双休日、节假日不用送货）写字楼/商用地址客户选择"/><label for="name2">{{shsj3}}</label>
					</p>
				</div>
				<div class="zzj_neirong_box7" id="qiaokeli">
					<div class="box7_dingdan">订单编号：201501261448110173000</div>
					<div class="box7_shangpin">
						<img src="img/sc_12_1.jpg" >
						<div>巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮</div>
					</div>
					<div class="box7_shuliang">
						<div class="jiage">价格：￥{{jiage}}</div>
						<div class="btn_danji" id="jiajian">
							<button class="btn_jian" @click="jian">-</button>
							<div class="shuliang">{{shuliang}}</div>
							<button class="btn_jia" @click="jia">+</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 提交订单开始 -->
			<div class="zzj_tijiaodingdan" @click="tijiao()">提交订单</div>
			<!-- 提交订单结束 -->	
		</div>
		
		<!-- 大盒子结束 -->
		<!-- 提交订单界面2 -->
			<div id="zzj_yemian2">
				<div id="yemian2_box1">
					<div><img src="img/定位.png" ></div>
					<div >
						<div>收货人：<span id="shr2"></span>&nbsp;&nbsp; <span id="sjhm2"></span></div>
						<div>收货地址：<span id="dqxx2"></span>&nbsp;&nbsp;邮政编码：<span id="yzbm2"></span></div>
					</div>
					<div> <img src="img/sc_9_r.png" > </div>
				</div>
				<div id="yemian2_box2">
					<div>发货时间:</div>
					<div id="fhsj2"> </div>
				</div>
				<div id="yemian2_box3" >
					<!-- 巧克力商品模块 -->
				</div>
				<div id="yemian2_box4" @click="dakai">结算</div>
			</div>
		<!-- 提交订单界面2结束 -->	
		
		<!-- 付款成功de界面开始 -->	
		<div id="zzj_fukuanchengggong">
			<div id="zzj_fukaun_box1">
				<img src="img/sc_9_g.png" style="float: left;">
				<div><span>付款成功</span><br>等待对方发货,联系对方尽快发货.</div>
			</div>
			<div id="zzj_fukaun_box2">
				<span>交易信息</span>
			</div>
			<div id="zzj_fukaun_box3">
				<p>商品信息：<span>{{text1}}</span></p>
				<p>商品总价：<span>{{zj}}元</span></p>
				<p>邮费：<span>10.00元</span></p>
				<p>应付总价：<span>{{yfzj}}元</span></p>
				<p>实际付款：<span>{{yfzj}}元</span></p>
				<p id="Mmin">交易时间：<div id="Main"></div></p>
			</div>
			<a href="index.html"><div id="zzj_fanhui" @click="fannhui()">返回</div></a>
		</div>
		<!-- 付款成功de界面结束 -->
	</div><!-- app盒子 -->
	</body>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				biaoti:"确认订单",
				text1:"巧罗进口料手工黑松露巧克力礼盒8口味400g零食包邮",
				text2:"德芙巧克力喜糖批发散装4.5g小粒装结婚丝滑牛奶黑婚礼糖果旗舰店,德芙巧克力喜糖批发散装4.5g小粒装结婚丝滑牛奶黑婚礼糖果旗舰店",  				
				str:".....",
				nub1:10,
				nub2:60,
				str2:".....",
				isShow:true,
				xiang:"更多详情",
				shuliang:1,
				jiage:1200,
				shsj1:'工作日、双休日与节假日均可送货',
				shsj2:'只有双休日、节假日送货（工作日不用送货）',
				shsj3:'只有工作日送货（双休日、节假日不用送货）写字楼/商用地址客户选择',
				zj:1,
				yfzj:1,
				// _this:this,
				
			},
			filters:{
				xx:function(aa,cont,str){
					if(aa.length>cont){
						return aa.slice(0,cont)+str;
					}else{
						return aa;
					}
				}
			},
			methods:{
				open(){
					if(this.isShow){
						this.str2=".....";
						this.nub2=60;
						this.xiang="更多详情";
						this.isShow=false;
					}else{
						this.str2='';
						this.nub2=this.text2.length;
						this.xiang="收起详情";
						this.isShow=true;
					}
				},
				jian(){
					if(this.shuliang<2){
						this.shuliang==1;
					}else{
						this.shuliang--;
						this.jiage = this.shuliang*1200;
					}
				},
				jia(){
					if(this.jiage<1200){
						this.jiage==1200;
					}else{
						this.shuliang++;
						this.jiage = this.shuliang*1200;
					}
				},
				tijiao(){
					var shr = document.getElementById('shr');
					var sjhm = document.getElementById('sjhm');
					var dqxx = document.getElementById('dqxx');
					var xxdz = document.getElementById('xxdz');
					var yzbm = document.getElementById('yzbm');
					var shr2 = document.getElementById('shr2');
					var sjhm2 = document.getElementById('sjhm2');
					var dqxx2 = document.getElementById('dqxx2');
					var yzbm2 = document.getElementById('yzbm2');
					var zzj_yemian2 = document.getElementById('zzj_yemian2');
					var fhsj2 = document.getElementById('fhsj2');
					var intpt = document.getElementsByName('sex');
					var qiaokeli = document.getElementById('qiaokeli');
					var yemian2_box3 = document.getElementById('yemian2_box3');
					var jiajian = document.getElementById('jiajian');
					shr2.innerHTML = shr.value;
					sjhm2.innerHTML = sjhm.value ;
					dqxx2.innerHTML = dqxx.value + xxdz.value;
					yzbm2.innerHTML = yzbm.value;
					zzj_yemian2.style.display='block';
					for(i=0;i<intpt.length;i++){
						if(intpt[i].checked){
							fhsj2.innerHTML = intpt[i].value;
						}
					}
					jiajian.style.display='none';
					yemian2_box3.innerHTML = qiaokeli.innerHTML;
					
				},
				yincahng(){
					var zzj_yemian2 = document.getElementById('zzj_yemian2');
					var jiajian = document.getElementById('jiajian');
					zzj_yemian2.style.display='none';
					jiajian.style.display='block';
				},
				guanbi(){
					var box = document.getElementById('zzj_fukuanchengggong');
					box.style.display='none';
				},
				dakai(){
					var box = document.getElementById('zzj_fukuanchengggong');
					box.style.display='block';
					this.zj = this.jiage;
					// this.yfzj = this.zj +10;
					this.yfzj = Number(this.jiage) +Number(10);
				},
				fannhui(){
					localStorage.clear("jiesuan");
				},
				tichuanzhi(){
					// var jiajian = document.getElementById('jiajian');
					if(localStorage.getItem("nuu")){
						this.jiage=localStorage.getItem("jiesuan");
						this.yfzj = Number(this.jiage) +Number(10);
						this.shuliang = localStorage.getItem("zzs");
						// console.log(this.yfzj)
						// jiajian.style.display='none';
					}else{
						this.jiage=1200;
						this.shuliang=1;
					}
					// console.log(localStorage.getItem("nuu"))
					
				},
					
			},
			mounted(){
				this.tichuanzhi();
			}
		})
	</script>
	<script type="text/javascript">
	// window.onload=function()
	// {
		var shr = document.getElementById('shr');
		var sjhm = document.getElementById('sjhm');
		var dqxx = document.getElementById('dqxx');
		var xxdz = document.getElementById('xxdz');
		var yzbm = document.getElementById('yzbm');
		// var bb = document.getElementById('bb');
		shr.value=localStorage.getItem("aa");
		sjhm.value=localStorage.getItem("bb");
		dqxx.value=localStorage.getItem("cc");
		xxdz.value=localStorage.getItem("dd");
		yzbm.value=localStorage.getItem("ee");
		
		// var jiage = document.querySelector('.jiage');
		// jiage.innerHTML = '价格：￥'+ localStorage.getItem("jiesuan");
		
	// };
	window.onload=function()
	
	{
	
	window.requestAnimationFrame(getDate)
	
	}
	
	function getDate()
	
	{
	
	window.setTimeout(function(){
	
	window.requestAnimationFrame(getDate)
	
	},1000/2)
	
	var d=new Date();   
	
	var year=d.getFullYear()  //获取年
	
	var month=d.getMonth()+1;  //获取月，从 Date 对象返回月份 (0 ~ 11)，故在此处+1
	
	var day=d.getDay()    //获取日
	
	var days=d.getDate() //获取日期
	
	var hour=d.getHours()   //获取小时
	
	var minute=d.getMinutes()  //获取分钟
	
	var second=d.getSeconds()   //获取秒
	
	if(month<10) month="0"+month
	
	if(days<10) days="0"+days
	
	if(hour<10) hour="0"+hour
	
	if(minute<10) minute="0"+minute
	
	if(second<10) second="0"+second
	
	var week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
	
	var Tools=document.getElementById("Main")
	
	var da=year+" 年 "+month+" 月 "+days+" 日 "+week[day]+" "+hour+" : "+minute;
	
	Tools.innerHTML=da
	
	}
	</script>
	
</html>
